<template>
  <div style="width:1200px; margin:0 auto">
    <Header></Header>

    <div>
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in items" :key="item">
          <img :src=item height="100%">
        </el-carousel-item>
      </el-carousel>

      <div v-for="advertisement in advertisements" :key="advertisement">
        <div style="font-size: larger;font-weight: bold;color: #1482f0;">{{advertisement.catalog.name}}
          <span><el-button type="success" size="small" round style="margin: 0px 0px 0px 1040px" @click="searchMore(advertisement.catalog.id)">更多></el-button></span></div>

        <el-row :gutter="20">
          <el-col :span="4" v-for="book in advertisement.bookList" :key="book" style="padding:0px">
            <el-card style="height: 330px; padding: 0px">
              <router-link :to="`/front/detail/${book.id}`"><img :src=book.picture  class="image"></router-link>

              <div style="padding: 0px;">
                <span>{{book.name}}</span>
                <div>{{book.author}}</div>
                <span style="color: red">¥{{(book.price * 0.01).toFixed(2)}}</span>
                <span style="color:#909399;font-size:12px;text-decoration:line-through">¥{{(book.orignPrice * 0.01).toFixed(2)}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <br>
        <br>
      </div>

    </div>

    <Footer></Footer>
  </div>


</template>

<script>
  import Footer from '@/components/Footer'
  import Header from '@/components/Header'
  import bookApi from '@/api/book'

  export default {
    components: {
      Footer,
      Header
    },
    data() {
      return {
        items: [
          'http://img62.ddimg.cn/upload_img/00678/zsts/750x315_wzh_20190624-1561541095.jpg',
          'http://img60.ddimg.cn/upload_img/00678/zsts/6yxs-750x315-1559301849.jpg',
          'http://img63.ddimg.cn/topic_img/gys_0014951/tkmy_0628_750_315.jpg',
          'http://img54.ddimg.cn/9002790054044304.jpg'
        ],
        advertisements: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        bookApi.getAdvertisement().then(response => {
          this.advertisements = response.data
        })
      },
      searchMore(id) {
        this.$router.push({
          path: '/front/search',
          name: 'Search',
          params: {
            catalogId: id
          }
        })
      }
    }
  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .image{
    width: 180px;
    height: 200px;
  }

  .el-card{
    width: 200px;
    height: 400px;
  }

</style>
